<template>
  <div>
    <div class="detail" v-if="stroeDetail && !showQRCode">
      <div class="detail-header">
        <svg
          @click="$router.back()"
          t="1671798247143"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2281"
          width="200"
          height="200"
        >
          <path
            d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
            p-id="2282"
          ></path>
          <path
            d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
            p-id="2283"
          ></path>
        </svg>
        <span>店铺信息</span>
        <svg
          t="1671798545812"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3355"
          width="200"
          height="200"
        >
          <path
            d="M320.64 848.05c-11.58-13.35-10.14-33.56 3.22-45.14l331.38-282.1c4.61-4 4.6-11.17-0.04-15.14L323.81 221.19c-13.41-11.51-14.95-31.71-3.44-45.12 11.51-13.41 31.71-14.95 45.12-3.44l378.88 325.25c9.27 7.96 9.3 22.29 0.07 30.29l-378.68 323.1c-13.34 11.57-33.55 10.13-45.12-3.22z"
            p-id="3356"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div
        class="detail-content"
        :style="{ backgroundImage: `url(${stroeDetail.storeBackdropUrl})` }"
      >
        <div class="content-title">
          <div class="title-logo">
            <img :src="stroeDetail.storeLogoUrl" alt="" />
          </div>
          <div class="title-msg">
            <div class="title">
              <h3>{{ stroeDetail.storeName }}</h3>
              <span>自营</span>
            </div>
            <div class="hot">
              <img
                src="https://image-mall.gxptkc.com/m/resources/store/renqizhi.png"
                alt=""
              />
              <span>人气：{{ stroeDetail.followNumber }}</span>
            </div>
          </div>
        </div>
        <div class="content-service">
          <div class="service-title">
            <p>店铺二维码</p>
            <img
              @click="showQRCode = true"
              src="	https://image-mall.gxptkc.com/m/resources/store/erweima.png"
              alt=""
            />
          </div>
          <ul class="service-content">
            <li>
              <span>描述相符</span>
              <span>{{ stroeDetail.descriptionScore }}</span>
              <span></span>
            </li>
            <li>
              <span>服务态度</span>
              <span>{{ stroeDetail.comprehensiveScore }}</span>
              <span></span>
            </li>
            <li>
              <span>发货速度</span>
              <span>{{ stroeDetail.deliverScore }}</span>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="content-company">
          <ul class="company">
            <li>
              <span>公司名称</span>
              <span>{{ stroeDetail.companyName }}</span>
            </li>
            <li>
              <span>公司所在地</span>
              <span>{{ stroeDetail.address }}</span>
            </li>
            <li>
              <span>开店时间</span>
              <span>{{ stroeDetail.createTime }}</span>
            </li>
            <li>
              <span>主营商品</span>
              <span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="qrcode" v-if="showQRCode" @click="showQRCode = false">
      这是二维码
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stroeDetail: null,
      showQRCode: false,
    };
  },
  async created() {
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/seller/front/store/detail?storeId=${this.$route.query.storeid}`
    );
    this.stroeDetail = res.data.data;
  },
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: rgb(245, 245, 245);
  width: 100vw;
  height: 100vh;
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rem;
    box-sizing: border-box;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      font-weight: bold;
      color: #000;
    }
  }
  .detail-content {
    // background-color: #000;
    padding: 20rem 10rem 70rem;
    background-position: center;
    background-size: cover;
    color: #fff;

    position: relative;
    .content-title {
      display: flex;
      justify-content: left;
      align-items: center;
      .title-logo {
        img {
          width: 40rem;
          height: 40rem;
        }
      }
      .title-msg {
        margin-left: 5rem;
        .title {
          display: flex;
          justify-content: left;
          align-items: center;
          h3 {
            font-size: 15rem;
            font-weight: bold;
          }
          span {
            padding: 0rem 5rem;
            background-color: #fc1c1c;
            border-radius: 10rem;
            margin-left: 10rem;
          }
        }
        .hot {
          display: flex;
          justify-content: left;
          align-items: center;
          margin-top: 3rem;
          img {
            width: 20rem;
            height: 20rem;
            margin-right: 3rem;
          }
        }
      }
    }
    .content-service {
      background-color: #fff;
      border-radius: 10rem;
      margin-top: 20rem;
      .service-title {
        padding: 10rem 8rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(245, 245, 245);
        p {
          font-size: 14rem;
          color: #2d2d2d;
          font-weight: bold;
        }
        img {
          width: 17rem;
        }
      }
      ul.service-content {
        padding: 10rem 8rem;
        li {
          line-height: 28rem;
          display: flex;
          justify-content: space-between;
          span {
            font-size: 13rem;
            color: #666;
            &:nth-child(2) {
              color: #fe811c;
            }
          }
        }
      }
    }
    .content-company {
      position: absolute;
      bottom: -105rem;
      left: 8rem;
      border-radius: 10rem;
      background-color: #fff;
      width: calc(100vw - 16rem);
      ul.company {
        width: 100%;
        color: #2d2d2d;
        padding: 0 8rem;
        box-sizing: border-box;
        li {
          line-height: 39rem;
          border-bottom: 1px solid rgb(245, 245, 245);
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 14rem;
            &:nth-child(2) {
              font-size: 13rem;
              color: #666;
            }
          }
        }
      }
    }
  }
}
.qrcode {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);

  position: absolute;
  top: 0;
  left: 0;
}
</style>